<template>
    <div class="container">
        <img src="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581561846000/top-bg.png"
             class="hd-img-responsive"/>
        <div class="container-body">
            <div class="main-menu">
                <van-grid :column-num="4">
                    <van-grid-item
                            to="/mine-complaint-submit"
                            icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581410949000/%E5%9B%BE%E5%B1%82%208@2x.png"
                            text="投诉举报"/>
                    <van-grid-item
                            to="/epidemic-day-submit"
                            icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581410949000/%E5%9B%BE%E5%B1%82%209@2x.png"
                            text="每日自查"/>
                    <!--                to="/epidemic-remote-inquiry"-->
                    <!--                @click="remoteInquiry"-->
                    <van-grid-item
                            to="/epidemic-remote-inquiry"
                            icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581411044000/%E5%9B%BE%E5%B1%82%2012@2x.png"
                            text="远程问诊"/>
<!--                    <van-grid-item-->
<!--                            @click="txcx"-->
<!--                            icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581411044000/%E5%9B%BE%E5%B1%82%2013@2x.png"-->
<!--                            text="同行查询"/>-->
<!--                    <van-grid-item-->
<!--                            @click="yqdt"-->
<!--                            icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581411044000/%E5%9B%BE%E5%B1%82%2010@2x.png"-->
<!--                            text="疫情动态"/>-->
<!--                    <van-grid-item-->
<!--                            to="/epidemic-case"-->
<!--                            icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581561846000/icon01.png"-->
<!--                            text="确认病例"/>-->
                    <!--                <van-grid-item-->
                    <!--                        to="/epidemic-love"-->
                    <!--                        icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581411044000/%E5%9B%BE%E5%B1%82%2014@2x.png"-->
                    <!--                        text="爱心公示" />-->
<!--                    <van-grid-item-->
<!--                            @click="epidemic_love"-->
<!--                            icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581561846000/icon02.png"-->
<!--                            text="爱心公示"/>-->
                    <van-grid-item
                            to="/outpatient-department"
                            icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581411044000/%E5%9B%BE%E5%B1%82%2015@2x.png"
                            text="发热门诊"/>
                </van-grid>
            </div>
            <div class="gov-notice" @click="toNews">
                <van-notice-bar
                        color="#1989fa"
                        background="#ecf9ff"
                        left-icon="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581411044000/%E5%9B%BE%E5%B1%82%2016@2x.png"
                >
                    关于在全市住宅小区（村）推行居民出入通行证制度的通告（第8号）
                </van-notice-bar>
            </div>
            <!--<div class="ad">
                <van-grid :gutter="10" :column-num="2" :border="false">
                    <van-grid-item>
                        <img src="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581046790000/%E7%A1%AE%E8%AE%A4%E7%97%85%E4%BE%8B.png"
                             class="hd-img-responsive"/>
                    </van-grid-item>
                    <van-grid-item>
                        <img src="https://skv4.oss-cn-hangzhou.aliyuncs.com/app/skv4/common1581046790000/%E7%88%B1%E5%BF%83%E5%85%AC%E7%A4%BA.png"
                             class="hd-img-responsive"/>
                    </van-grid-item>
                </van-grid>
            </div>-->
            <van-tabs v-model="active">
                <van-tab title="防疫常识">
                    <div class="news-list">
                        <!--                    <div class="news-header">防护知识</div>-->
                        <div class="news-body" v-for="item in fangyichangshi" :key="item.id">
                            <div class="item style_01 van-hairline--bottom" @click="toInfo(item.link)">
                                <div class="enterprise-item-con-left">
                                    <img class="hd-img-responsive"
                                         :src="item.thumb"/>
                                </div>
                                <div class="enterprise-item-con-right">
                                    <div class="title hd-ellipsis-2">{{item.title}}</div>
                                    <div class="desc">{{item.author}}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-tab>
                <van-tab title="热点关注">
                    <div class="news-list enterprise-item" style="padding-top:0;">
                        <div class="van-cell-group van-hairline--top-bottom" v-for="item in redianzhuanti"
                             :key="item.type">
                            <div class="van-cell" @click="toInfo(item.link)">
                                <div class="van-cell__title">
                                    <span>【{{item.publish_time}}】{{item.title}}</span>
                                    <div class="van-cell__label">
                                        <span class="left-item">{{item.author}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--<div class="news-body">
                            <div class="item style_01 van-hairline&#45;&#45;bottom" @click="toInfo(item.href)">
                                <div class="enterprise-item-con-left">
                                    <img class="hd-img-responsive"
                                         :src="item.img"/>
                                </div>
                                <div class="enterprise-item-con-right">
                                    <div class="title hd-ellipsis-2">{{item.title}}</div>
                                    <div class="desc">{{item.title}}</div>
                                </div>
                            </div>
                        </div>-->
                    </div>
                </van-tab>
            </van-tabs>
        </div>
        <!--<van-row class="body" type="flex" justify="center">
            <van-col class="body-inner" span="22">
                <br>
                <van-row type="flex" justify="center">
                    <van-col span="22">
                        <data-bar></data-bar>
                    </van-col>
                </van-row>
                <van-divider/>
                <van-row type="flex" justify="center">
                    <van-col span="22">
                        <contact-time-echart :width="offsetWidth * 0.9" :height="250"></contact-time-echart>
                    </van-col>
                </van-row>
                <van-divider/>
                <van-row type="flex" justify="center">
                    <van-col span="22">
                        <contact-district-echart :width="offsetWidth * 0.9" :height="250"></contact-district-echart>
                    </van-col>
                </van-row>
                <van-divider/>
                <van-row type="flex" justify="center">
                    <van-col span="22">
                        <fever-time-echart :width="offsetWidth * 0.9" :height="250"></fever-time-echart>
                    </van-col>
                </van-row>
                <van-divider/>
                <van-row type="flex" justify="center">
                    <van-col span="22">
                        <fever-district-echart :width="offsetWidth * 0.9" :height="250"></fever-district-echart>
                    </van-col>
                </van-row>
                <van-divider/>
                <van-row type="flex" justify="center">
                    <van-col span="22">
                        <city-time-echart :width="offsetWidth * 0.9" :height="250"></city-time-echart>
                    </van-col>
                </van-row>
                <van-divider/>
                <van-row type="flex" justify="center">
                    <van-col span="22">
                        <city-district-echart :width="offsetWidth * 0.9" :height="250"></city-district-echart>
                    </van-col>
                </van-row>
                &lt;!&ndash;            <van-divider />&ndash;&gt;
                &lt;!&ndash;            <van-row type="flex" justify="center">&ndash;&gt;
                &lt;!&ndash;                <van-col span="22">&ndash;&gt;
                &lt;!&ndash;                    <district-situation-table></district-situation-table>&ndash;&gt;
                &lt;!&ndash;                </van-col>&ndash;&gt;
                &lt;!&ndash;            </van-row>&ndash;&gt;
                &lt;!&ndash;            <br>&ndash;&gt;
            </van-col>
        </van-row>-->
    </div>
</template>

<script>
// import DataBar from './compoments/data-bar'
// import ContactTimeEchart from './compoments/contact-time-echart'
// import ContactDistrictEchart from './compoments/contact-district-echart'
// import FeverTimeEchart from './compoments/fever-time-echart'
// import FeverDistrictEchart from './compoments/fever-district-echart'
// import CityTimeEchart from './compoments/city-time-echart'
// import CityDistrictEchart from './compoments/city-district-echart'
// import DistrictSituationTable from './compoments/district-situation-table'
import {
  epidemicSituationList,
  getArticleListNoUserList
} from
  '@/api/yi-qing-fang-kong.js'
import {
  // Toast,
  Dialog
} from 'vant'
export default {
  name: 'index',
  data () {
    return {
      offsetWidth: document.documentElement.clientWidth,
      offsetHeight: document.documentElement.clientHeight,
      active: 0,
      one: [],
      two: [],
      redianzhuanti: [
        // {
        //   title: '和平区财政事务服务中心五举措做好政府采购疫情防控工作',
        //   href: 'http://www.shenyang.gov.cn/html/SY/156144112791369/15470010451815/156144112791369/1279136911910560.html',
        //   type: '和平区',
        //   time: '2020-02-12'
        // },
        // {
        //   title: '2020年2月12日0时至19时辽宁新型冠状病毒肺炎疫情情况 ',
        //   href: 'http://www.shenyang.gov.cn/html/SY/156144112791369/15470010451815/156144112791369/1279136988943778.html',
        //   type: '辽宁省卫生健康委网站',
        //   time: '2020-02-12'
        // },
        // {
        //   title: '湖北省台办：在鄂台胞要求台湾方面让他们尽快回家 ',
        //   href: 'http://www.shenyang.gov.cn/html/SY/156144112791369/15470010451815/156144112791369/1279136964856198.html',
        //   type: '新华网',
        //   time: '2020-02-12'
        // },
        // {
        //   title: '两部门：积极应对新冠肺炎疫情影响 切实做好扶贫小额信贷工作 ',
        //   href: 'http://www.shenyang.gov.cn/html/SY/156144112791369/15470010451815/156144112791369/1279136964856179.html',
        //   type: '新华网',
        //   time: '2020-02-12'
        // }
      ],
      fangyichangshi: [
        // {
        //   img: 'https://a0.att.hudong.com/25/74/20300543525109158028749296748_950.jpg',
        //   title: '百科知识|你需要了解的全方位疫情信息',
        //   type: '百科',
        //   href: 'https://byte.baike.com/cwiki/%E7%99%BE%E7%A7%91%E4%B8%93%E9%A2%98%20%7C%20%E6%96%B0%E5%9E%8B%E5%86%A0%E7%8A%B6%E7%97%85%E6%AF%92%E8%82%BA%E7%82%8E?from=singlemessage#tt_daymode=1&tt_font=m'
        // },
        // {
        //   img: 'http://p3.pstatp.com/large/pgc-image/RpPUSswDYvo3C5',
        //   title: '扩散周知！返程返工，国家卫健委给你9点防控提醒',
        //   type: '人民日报',
        //   href: 'https://www.toutiao.com/i6789107607597482503/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&from=singlemessage×tamp=1581507783&app=news_article&utm_source=weixin&utm_medium=toutiao_android&req_id=202002121943030101290372372B293150&group_id=6789107607597482503'
        // },
        // {
        //   img: 'http://p3.pstatp.com/large/pgc-image/59f10aa84a9f4a609915b78430e2b633',
        //   title: '“不易感”≠“不感染”儿童应该怎样预防新型冠状病毒肺炎',
        //   type: '国家应急广播',
        //   href: 'https://www.toutiao.com/i6785834377281536525/?tt_from=weixin&utm_campaign=client_share&wxshare_count=1&from=singlemessage×tamp=1581508265&app=news_article&utm_source=weixin&utm_medium=toutiao_android&req_id=20200212195105010129048082101D50AB&group_id=6785834377281536525'
        // },
        // {
        //   href: 'https://m.toutiaocdn.com/group/6787310211066495501/?app=news_article&timestamp=1581508335&req_id=20200212195214010016023035263EF3BB&group_id=6787310211066495501&wxshare_count=1&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_android&utm_campaign=client_share',
        //   type: '央视网新闻',
        //   img: 'http://p3.pstatp.com/large/pgc-image/b1feca34d4354afabd759c9c8642d102',
        //   title: '老人儿童是易感人群吗？全民戴口罩是否有必要？卫健委这样回应'
        // },
        // {
        //   href: 'https://m.toutiaocdn.com/group/6787929957952651787/?app=news_article&timestamp=1581508228&req_id=20200212195028010010024224103F1F9E&group_id=6787929957952651787&wxshare_count=1&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_android&utm_campaign=client_share',
        //   type: '新体育网',
        //   img: 'http://p1.pstatp.com/large/pgc-image/9fdc632466ef4173af5ff48a590d8d78',
        //   title: '莫让“葛优躺”毁了身体 居家功能训练为你解忧'
        // },
        // {
        //   href: 'https://m.toutiaocdn.com/group/6786645326376731140/?app=news_article&timestamp=1581508058&req_id=20200212194738010016028134073F012B&group_id=6786645326376731140&wxshare_count=1&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_android&utm_campaign=client_share',
        //   type: '湖北之声',
        //   img: 'http://p1.pstatp.com/large/pgc-image/f13c80c61c064b46af3136b15c101fd9',
        //   title: '现金、压岁钱传播肺炎病毒？集体开窗唱歌风险巨大？'
        // }
      ]
    }
  },
  components: {
    // DataBar,
    // ContactTimeEchart,
    // ContactDistrictEchart,
    // FeverTimeEchart,
    // FeverDistrictEchart,
    // CityTimeEchart,
    // CityDistrictEchart
    // DistrictSituationTable
  },
  methods: {
    epidemic_love () {
      Dialog.alert({
        message: '敬请期待!'
      })
    },
    sense () {
      if (this.active === 0) {
        let data = { type_id: '0', index: this.active }
        this.init(data)
      } else {
        let data = { type_id: '1', index: this.active }
        this.init(data)
      }
    },
    init (data) {
      let index = data.index
      epidemicSituationList(data).then(ret => {
        if (index === 0) {
          this.one = ret.data.data
        } else if (index === 1) {
          this.two = ret.data.data
        }
        console.log(ret.data)
      })
    },
    toNews () {
      this.$router.push({
        name: 'epidemic-news'
      })
      // window.location.href = 'http://www.shenyang.gov.cn/syszf/zt/fkxx/tzgg/glist.html'
    },
    toInfo (data) {
      window.location.href = data
      // this.$router.push({
      //   name: 'epidemic-info',
      //   query: {
      //     id: id
      //   }
      // })
    },
    yqdt () {
      window.location.href = 'https://news.qq.com/zt2020/page/feiyan.htm'
    },
    wdcx () {
      window.location.href = 'https://feiyan.wecity.qq.com/wuhan/dist/index.html#/feiyanmap?cityCode=210100&cityName=%E6%B2%88%E9%98%B3&provinceName=%E8%BE%BD%E5%AE%81&lat=0&lng=0&channel=&random=1580788351596&_scope=snsapi_base&nav_color=5391FF&front_color=ffffff'
    },
    txcx () {
      window.location.href = 'https://rl.inews.qq.com/h5/trip?from=newsapp&ADTAG=tgi.wx.share.message'
    },
    getArticleList () {
      getArticleListNoUserList({ category_id: '1' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.fangyichangshi = data.data
        } else {
          // Toast.fail(data.errmsg)
        }
      })
      getArticleListNoUserList({ category_id: '2' }).then(ret => {
        let data = ret.data
        if (data.errcode === 0) {
          this.redianzhuanti = data.data
        } else {
          // Toast.fail(data.errmsg)
        }
      })
    }
  },

  mounted () {
    this.init({ type_id: '0', index: 0 })
    this.getArticleList()
    console.log('2020-04-04')
  }
}
</script>

<style scoped>
    .container >>> .van-notice-bar__left-icon, .van-notice-bar__right-icon {
        font-size: 1.5rem;
        padding-right: 10px;
    }

    .container {
        background-color: #efefef;
    }

    .container-body {
        margin-top: -60px;
        padding: 0 10px;
    }

    .container-body > div {
        background-color: white;
        border-radius: 5px;
    }

    .main-menu {
        width: 100%;
        overflow: hidden;
        margin-bottom: 10px;
    }

    .main-menu >>> .van-grid {
        width: 100%;
    }

    .ad {
        margin-top: 10px;
    }

    .ad >>> .van-grid-item__content {
        padding: 0;
    }

    .gov-notice {
        margin-bottom: 10px;
    }

    .news-list {
        padding: 10px;
    }

    .news-list > .news-header {
        margin-bottom: 10px;
    }

    .news-body > .item {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    .news-body > .item > .con-right {
        width: 35%;
        margin-left: 15px;
    }

    .news-body > .item > .con-left {
        width: 65%;
    }

    .news-body > .item > .con-left > .title {
        font-size: 14px;
        color: #333;
    }

    .news-body > .item > .con-left > .desc {
        font-size: 12px;
        color: gray;
    }

    .gov-notice {
        padding: 10px;
    }

    .enterprise-item-con-right {
        width: 65%;
        margin-left: 15px;
    }

    .enterprise-item-con-left {
        width: 35%;
    }

    .enterprise-item-con-right > .title {
        font-size: 12px;
        color: #333;
    }

    .enterprise-item-con-right > .desc {
        font-size: 12px;
        color: gray;
    }

    .enterprise-item-con-left .hd-img-responsive {
        height: 4rem;
    }

    .container >>> [class*=van-hairline]::after {
        border-color: #dddddd;
        border-top: 0;
    }

    .news-list .van-cell__title {
        -webkit-box-flex: inherit;
        -webkit-flex: inherit;
        flex: inherit;
        width: 100%;
        font-size: 12px;

    }
    .news-list .van-cell__title span:nth-child(1){
        display: -webkit-box;
        overflow: hidden;
        white-space: normal!important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

    .news-list .van-cell__label .left-item {
        float: right;
    }

    .news-list .van-cell__label .right-item {
        float: right;
    }

    .container >>> .van-grid-item__content::after {
        z-index: 1;
        border-width: 0 0.1rem 0.1rem 0;
    }

    .container >>> .van-hairline--bottom::after {
        border-bottom-width: 0.1rem;
    }
</style>
